<template>
  <div>
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>用户名</label>
        <input type="text" class="mui-input-clear" placeholder="请输入用户名" v-model="login.username">
      </div>
      <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码" v-model="login.password">
      </div>
      <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" @click="login_event()" style="margin-right:30px;">确认</button>
        <button type="button" class="mui-btn mui-btn-danger" @click="register()">注册</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      login: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login_event () {
      // 登录点击后的事件
      if (this.login.username === '' || this.login.password === '') {
        this.$toast('请输入相应信息')
      } else {
        this.$http
          .post('login', this.login)
          .then(result => {
            console.log(result)
            if (result.data.code === 0) {
              this.$toast(result.data.msg)
            } else {
              // 登录成功
              console.log(result)
              // 1.提示信息
              this.$toast(result.data.msg)
              // 2.传到vuex中
              // 为什么不需要密码?
              // 先修改states里面的信息
              this.$store.commit('user/setUser', result.data.data)
              // 设置本地储存,在登录设置,后面才能不断使用切换
              this.$auth.setAuthorization(result.data.data.session_id)
              // 3.到达指定页面
              this.$router.push('/my')
            }
          })
          .catch(() => {
            this.$toast('请求失败')
          })
      }
    },
    register () {
      this.$router.push('/my/register')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
